@import "../../common";

page {
  background-color: #fff;
}

#canvas{
  width: 100%;
  height: 200rpx;
  padding: 330rpx 0 0 0;
}

.login-container {
  box-sizing: border-box;
  padding: 0 44rpx;

  .logo {
    margin: 330rpx auto;
    display: none;
    @include flex-center;

    image {
      @include size(180, 180, 0%);
    }

    text {
      display: block;
      text-align: center;
    }
  }
  .user-info {
    padding: 0rpx 0 40rpx 0;
    text-align: center;
    
    
    image {
      @include size(180, 180, 50%);
      margin: auto;
      display: none;
    }
    .phone {
      text-align: center;
      font-size: 48rpx;
      margin: 32px 0 0 0;
      font-weight: 500;
      color: #333;
      opacity: 0;
      transform: translateY(100rpx);
    }
  }

  .login-box {
    // opacity: 0;
   
    &.active {
      animation: toUp 0.35s forwards;
    }
  }
  .login-btn {
    width: 100%;
    height: 90rpx;
    @include flex-center;
    position: relative;
    margin-top: 24rpx;

    button {
      @include fontStyle(32, 32, #FFFFFF, 500);
    }

    .shade {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0);
      z-index: 100;
    }
    .btn-box {
      width: 100%;
      height: 100%;
    }
    .btn {
      width: 100%;
      height: 100%;
      background-color: transparent;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--color-theme);
      border-radius: 45rpx;
      opacity: 0;
      &.new{
       
        transform: translateY(100rpx);
      }
      &.old {
        background-color: transparent;
        color: #666;
        font-size: 28rpx;
        transform: translateY(100rpx);
      }
    }
  }

  .check-box {
    @include flex-center;
    @include fontStyle(24, 42, #666666, 400);
    margin-top: 32rpx;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(100rpx);

    .check-block {
      @include flex;
      flex-wrap: wrap;
    }

    .protocol {
      @include flex;
    }

    .icon {
      @include size(24, 24, 50%);
      box-sizing: border-box;
      margin-right: 10rpx;
      position: relative;
      &.border{
        border: 1px solid #666;
      }
      image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .icon_check {
        position: relative;
        width: 24rpx;
        height: 24rpx;
        background-color: var(--color-theme);
        border-radius: 50%;
        margin: auto;
    
        .icon_1,
        .icon_2 {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 3rpx;
          background-color: #FFFFFF;
          border-radius: 0rpx;
        }
    
        .icon_1 {
          height: 9rpx;
          transform: translate(-50%, -50%) rotate(-45deg);
          margin: 3rpx 0 0 -3rpx;
        }
    
        .icon_2 {
          height: 12rpx;
          transform: translate(-50%, -50%) rotate(45deg);
          margin: 0rpx 0 0 4rpx;
        }
      }
    }

    navigator {
      display: inline;
      color: var(--color-theme);
    }
  }
}

.other-phone {
  font-size: 24rpx;
}

.update-container {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;

  &.active {
    .popup-shade {
      background-color: rgba(0, 0, 0, 0.65);
    }

    .popup-main {
      transform: translateY(0);
    }
  }

  .popup-shade {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: all 0.35s;
  }

  .popup-main {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #ffffff;
    border-radius: 32rpx 32rpx 0 0;
    box-sizing: border-box;
    padding: 32rpx calc(22rpx * 2);
    transform: translateY(100%);
    transition: all 0.35s;
    padding-bottom: env(safe-area-inset-bottom);

    .driving-school {
      @include flex;

      image {
        @include size(72, 72);
      }

      text {
        @include fontStyle(28, 28, #000000, 500);
        margin-left: 16rpx;
      }
    }

    .line {
      height: 108rpx;
      @include flex;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;

      text {
        width: 100rpx;
        @include fontStyle(32, 32, #000000, 400);
      }

      .arrow {
        width: 50rpx;

        image {
          @include size(24, 24);
        }
      }

      button {
        width: calc(100% - 150rpx);
        height: 76rpx;
        margin: 0;
        padding: 0;
        background-color: transparent;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        image {
          @include size(76, 76);
        }
      }

      input {
        width: calc(100% - 100rpx);
        height: 72rpx;
        @include fontStyle(32, 32, #000000, 400);
      }
    }

    .allow {
      height: 90rpx;
      background: var(--color-theme);
      border-radius: 45rpx;
      @include flex-center;
      @include fontStyle(36, 36, #FFFFFF, 400);
      margin-top: 104rpx;
    }
    .reject {
      @include flex-center;
      @include fontStyle(28, 70, #666666, 400);
      margin: 30rpx 0 62rpx 0;
      text {
        padding: 24rpx;
      }
    }
  }
}


.oldUser{
  .phone{
    animation: toUp 0.35s forwards;
  }
  .new{
    animation: toUp 0.35s 0.1s forwards;
  }
  .old{
    animation: toUp 0.35s 0.2s forwards;
  }
  .check-box{
    animation: toUp 0.35s 0.3s forwards;
  }
}

.newUser{
  .user-info{
    padding-bottom: 100rpx;
  }
  .new{
    animation: toUp 0.35s forwards;
  }
  .new{
    animation: toUp 0.35s 0.1s forwards;
  }
  .check-box{
    animation: toUp 0.35s 0.2s forwards;
  }
}